<template>
  <a-spin :spinning="confirmLoading">
    <j-modal
      title="节目列表"
      width="70%"
      :visible="visible"
      switchFullscreen
      @cancel="onCancel"
      cancelText="关闭"
      :footer="footer"
    >
      <a-radio-group v-model="tabType" @change="changeTabType">
        <a-radio-button value="0">公告</a-radio-button>
        <a-radio-button value="1">图片</a-radio-button>
        <a-radio-button value="2">视频</a-radio-button>
      </a-radio-group>
      <a-button type="primary" icon="plus" style="margin-left: 10px" @click="add" v-show="tabType == 0">新增</a-button>
      <a-button type="primary" icon="upload" style="margin-left: 10px" @click="uploaded" v-show="tabType != 0"
        >上传</a-button
      >
      <div style="margin-top: 10px">
        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
          <span slot="action" slot-scope="text, record" v-if="tabType == 0">
            <a-popconfirm title="确定开始播放吗?" @confirm="() => handlePlay(record)">
              <a>播放</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          <span slot="action_media" slot-scope="text, record" v-else>
            <a-popconfirm title="确定开始播放吗?" @confirm="() => handlePlay(record)">
              <a>播放</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          <template slot="avatarslot" slot-scope="text, record">
            <div class="anty-img-wrap">
              <a-avatar shape="square" :src="getAvatarView(record.filePath)" icon="user" />
            </div>
          </template>
        </a-table>
      </div>
    </j-modal>
    <AddProgramModal ref="modalForm" @ok="success" />
    <ImageUploadModal ref="imageUploadModalRef" @uploadSuccess="uploadSuccess" />
  </a-spin>
</template>

<script>
const TABTYPE = {
  GG: '0', //公告
  TP: '1', //图片
  SP:'2',//视频
  YP:'3',//音频
}
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AddProgramModal from './addProgramModal.vue'
import ImageUploadModal from './imageUploadModal.vue'
import { getFileAccessHttpUrl } from '@/api/manage'
import { postAction } from '../../../../api/manage'
export default {
  name: 'ProgramListModal',
  mixins: [JeecgListMixin],
  components: { AddProgramModal, ImageUploadModal },
  data() {
    return {
      confirmLoading: false,
      visible: false,
      deviceId: '',
      model: {},
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '公告标题',
          dataIndex: 'title',
          align: 'left',
        },
        {
          title: '背景色',
          dataIndex: 'bgColor',
          align: 'center',
        },
        // {
        //   title: '公告内容',
        //   dataIndex: 'content',
        //   align: 'center',
        // },
        
        {
          title: '字体颜色',
          dataIndex: 'fontColor',
          align: 'center',
        },
        {
          title: '字体名称',
          dataIndex: 'fontName',
          align: 'center',
        },
        {
          title: '字体大小',
          dataIndex: 'fontSize',
          align: 'center',
        },{
          title: '创建人',
          dataIndex: 'createBy',
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/corp/bulletin/list',
        delete: '/corp/bulletin/delete',
      },
      // 其他属性
      tabType: TABTYPE.GG,
    }
  },
  methods: {
    init(deviceId) {
      this.deviceId = deviceId
      this.visible = true
      this.tabType = TABTYPE.GG
      this.loadData()
    },
    uploadSuccess() {
      this.loadData()
    },
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    success() {
      this.loadData(1)
    },
    add() {
      this.$refs.modalForm.init()
    },
    handlePlay(record) {

      // 文字播放
      if(this.tabType == TABTYPE.GG) {
        postAction('/corp/led/playBullentin', {
          bullentinId: record.id,
          id: this.deviceId
        }).then(res => {
          if(res.success) {
            this.$message.success('已播放')
          } else {
            this.$message.error(res.message)
          }
        })
      } else if(this.tabType== TABTYPE.TP) {
        postAction('/corp/led/playPic', {
          fileId: record.id,
          id: this.deviceId
        }).then(res => {
          if(res.success) {
            this.$message.success('已播放')
          } else {
            this.$message.error(res.message)
          }
        })
      }else if(this.tabType== TABTYPE.SP) {
        postAction('/corp/led/playVideo', {
          fileId: record.id,
          id: this.deviceId
        }).then(res => {
          if(res.success) {
            this.$message.success('已播放')
          } else {
            this.$message.error(res.message)
          }
        })
      }

    },
    onCancel() {
      this.visible = false
      this.tabType = TABTYPE.GG
      this.url = {
        list: '/corp/bulletin/list',
        delete: '/corp/bulletin/delete',
      }
      this.columns = [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            },
          },
          {
            title: '公告标题',
            dataIndex: 'title',
            align: 'left',
          },
          {
            title: '背景色',
            dataIndex: 'bgColor',
            align: 'center',
          },
          // {
          //   title: '公告内容',
          //   dataIndex: 'content',
          //   align: 'center',
          // },
          {
            title: '字体颜色',
            dataIndex: 'fontColor',
            align: 'center',
          },
          {
            title: '字体名称',
            dataIndex: 'fontName',
            align: 'center',
          },
          {
            title: '字体大小',
            dataIndex: 'fontSize',
            align: 'center',
          },{
            title: '创建人',
            dataIndex: 'createBy',
            align: 'center',
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' },
          },
        ]
    },
    footer() {
      return <a-button onClick={this.onCancel}>关闭</a-button>
    },
    changeTabType(e) {
      this.tabType = e.target.value

      if (e.target.value == TABTYPE.GG) {// 公告
        this.url = {
          list: '/corp/bulletin/list',
          delete: '/corp/bulletin/delete',
        }
        this.columns = [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            },
          },
          {
            title: '公告标题',
            dataIndex: 'title',
            align: 'left',
          },
          {
            title: '背景色',
            dataIndex: 'bgColor',
            align: 'center',
          },
          // {
          //   title: '公告内容',
          //   dataIndex: 'content',
          //   align: 'center',
          // },
          {
            title: '字体颜色',
            dataIndex: 'fontColor',
            align: 'center',
          },
          {
            title: '字体名称',
            dataIndex: 'fontName',
            align: 'center',
          },
          {
            title: '字体大小',
            dataIndex: 'fontSize',
            align: 'center',
          },
          {
            title: '创建人',
            dataIndex: 'createBy',
            align: 'center',
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
          },
          {
            title: '操作',
            dataIndex: 'action_media',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' },
          },
        ]
        this.loadData(1)
      } else {
        this.url = {
          list: '/corp/tbFile/list?fileCatalog='+e.target.value,
          delete: '/corp/tbFile/delete',
        }
        
        this.columns = [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            },
          },
          {
            title: '文件名',
            align: 'left',
            dataIndex: 'fileName',
          },
          {
            title: '缩略图',
            align: 'center',
            dataIndex: 'filePath',
            scopedSlots: { customRender: 'avatarslot' },
          },
          {
            title: '文件大小',
            align: 'center',
            dataIndex: 'fileSize',
          },
          {
            title: '创建人',
            dataIndex: 'createBy',
            align: 'center',
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' },
          },
        ]
        // if (e.target.value != TABTYPE.TP) {// 图片
        //   this.columns = this.columns.filter(obj=>obj.title!='缩略图');
        // }
        this.loadData(1)
      }
    },
    uploaded() {
      this.$refs.imageUploadModalRef.init()
    },
  },
}
</script>

<style lang="less" scoped>
</style>